<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2022/11/2
  Time: 20:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%= basePath%>">
    <script src="js/jquery-3.6.0.min.js"></script>
    <title>friendList</title>
</head>
<script type="text/javascript">
    $(function (){
        //给我的好友代码绑定单机事件,弹出我的好友代码(user_id)
        $("#getUserIdDiv").click(function (){
            alert($("#userIdInput").val())
        })

    //    给添加好友绑定单击事件,显示添加好友代码的文本框以及提交添加的按钮
        $("#addFriendDiv").click(function (){
            $("#editFriendDiv").html("")
            $("#editFriendDiv").toggle()
            $("#addFriendBtn").toggle()
        })

    //    给提交添加的按钮添加单机事件,发送ajax请求
    //    *******往后需要实现好友同意验证,此处直接实现输入好友代码直接添加好友*******
        $("#addFriendBtn").click(function (){
            var friendId=$("#editFriendDiv").html()
            if (friendId == ""){
                return
            }
            $.ajax({
                url : "workbench/main/addFriendList.do",
                dataType : "json",
                data : {
                    friendId : friendId
                },
                type : "post",
                success : function (resp){
                    if (resp.code == 1){
                        alert("添加成功")
                        $("#editFriendDiv").html("")
                        window.location.href="workbench/main/friendList.do"
                    }else {
                        alert(resp.message)
                    }
                }
            })
        })

        //页面加载完毕,发送ajax请求,加载出我的好友列表
        $.ajax({
            url : "workbench/main/queryFriendListByUserId.do",
            dataType: "json",
            type: "GET",
            success : function (friendList){
                let middleHtml=""
                $.each(friendList,function (i,friend){
                    middleHtml+="<div class='friendItemClass'> <div class='friendIdClass'>"+friend.friendId.substring(0,5)+"</div> <div class='friendNameClass'>"+friend.friend.userName+"</div> <button class='deleteFriendBtnClass'>删除</button> </div>"
                })
                $("#middle").append(middleHtml)
            }
        })
    })
</script>
<style>
    body{
        margin: 0;
        padding: 0;
        border: 0;
    }
    #mainDiv{
        height: 100%;
    }
    #middle{
        position: absolute;
        height: 100%;
        width: 80%;
        display: inline-block;
    }
    #right{
        position: absolute;
        height: 100%;
        margin-left: 80%;
        width: 20%;
        background: grey;
        display: inline-block;
    }
    #getUserIdDiv{
        top: 10%;
    }
    #addFriendDiv{
        top: 15%;
    }
    #editFriendDiv{
        top: 15%;
        margin-top: 5px;
        border-style: solid;
        text-align: left;
        height: 16px;
        font-size: 13px;
        width: 60%;
        border-width: 1px;
        overflow-y: hidden;
        overflow-x: hidden;
        display: none;
    }
    #addFriendBtn{
        position: absolute;
        top: 20%;
        margin-top: 18px;
        right: 10px;
        width: fit-content;
        height: fit-content;
        font-size: 13px;
        text-align: center;
        line-height: 13px;
        border-style: solid;
        border-width: 1px;
        border-color: black;
        display: none;
    }
    .inRight{
        position: relative;
        cursor: pointer;
        border-style: solid;
        width: 80%;
        margin-left: 10%;
        text-align: center;
        height: fit-content;
    }
    .friendItemClass{
        position: relative;
        margin-top: 20px;
        margin-bottom: 20px;
        left: 10%;
        width: 80%;
        height: 100px;
        display: inline-block;
        padding-left: 13px;
        border-style: solid;
        border-width: 1px;
    }
    .friendIdClass{
        position: relative;
        top: 5px;
        text-align: center;
        line-height: 25px;
        height: 25px;
        width: 50px;
        display: inline-block;
    }
    .friendNameClass{
        position: relative;
        margin-left: 10px;
        top: 5px;
        text-align: center;
        line-height: 25px;
        height: 25px;
        width: fit-content;
        display: inline-block;
    }
    .deleteFriendBtnClass{
        left: 90%;
        position: absolute;
        top: 5px;
        background: grey;
        text-align: center;
        line-height: 50px;
        width: 50px;
        height: 25px;
        text-align: center;
        line-height: 25px;
    }
</style>
<body>
<div id="mainDiv">
<%--    *******之后用头像代替friendIdClass,可以通过friendId查询到好友的头像*******--%>
    
    <div id="middle">
<%--        <div class='friendItemClass'>--%>
<%--            <div class='friendIdClass'>"+friend.friendId.substring(0,5)+"</div>--%>
<%--            <div class='friendNameClass'>"+friendList.friend.userName+"</div>--%>
<%--            <button class='deleteFriendBtnClass' value='删除'></button>--%>
<%--        </div>--%>
    </div>
    <div id="right">
        <input type="hidden" value="${sessionScope.sessionUser.userId}" id="userIdInput">
        <div id="getUserIdDiv" class="inRight">我的好友代码</div>
        <div id="addFriendDiv" class="inRight">添加好友</div>
        <div contenteditable="true" id="editFriendDiv" class="inRight"></div>
        <button class="inRight" id="addFriendBtn" >添加</button>
    </div>
</div>
</body>
</html>
